import React, {memo} from 'react';
import SingCoverItemStyle from "./SingCoverItemStyle";
import {useNavigate} from "react-router-dom";

/**
 * 时间 2024年1月10日 09点49分
 * 组件说明
 *  该组件主要用于歌手封面与歌手名称的展示
 * props说明
 *  singName: 歌手名称
 *  singCover: 歌手封面
 *  isRadius: 是否使用圆角,默认为圆角,否者不适用,为正方形
 *    其图片采用精灵图 并采用100% 100%
 *  isAmplify: 当鼠标移入封面时,封面图片是否放大
 *    默认为不放大,否者放大
 *  size: 封面大小,封面为正方形
 */
type Props = {
  singId?:number,
  singName?:String,
  singCover?:String,
  isRadius?:Boolean,
  isAmplify?:Boolean,
  size?:Number,
  className?:String,
};

/**
 * @description 该组件主要用于歌手封面与歌手名称的展示
 * @param props
 */
export default memo(function SingCoverItem(props: Props) {
  const navigate=useNavigate();
  return (
    <SingCoverItemStyle
      $size={props.size}
      $isRadius={props.isRadius}
      $isAmplify={props.isAmplify}
      $singCover={props.singCover}
    >
      <div className={`${props.className?props.className:""} sing-cover-item-cover`}></div>
      {/*是否加载歌手名称dom,如果singName存在就加载,否则不加载*/}
      {
        props.singName?<div className="sing-cover-item-name" onClick={()=>{
          navigate("/home/compositepages",{state:{type:4,id:props.singId}})
        }}>{props.singName}</div>:""
      }
    </SingCoverItemStyle>
  );
});
